@import '../style/color.scss';

.mkreact-switch {
  user-select: none;
}

.mkreact-switch.disabled {
  cursor: not-allowed;
  background-color: $B12 !important;
  color: $T3;
  .mkreact-switch-ball {
    &::after {
      display: none;
    }
  }
}

.mkreact-switch-input {
  position: relative;
  width: 55px;
  height: 24px;
  border: 1px solid #eee;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 16px;
  box-sizing: border-box;
  -webkit-transition: background-color 0.1s, border 0.1s;
  transition: background-color 0.1s, border 0.1s;
  padding: 0;
  -webkit-tap-highlight-color: rgba($color: #000000, $alpha: 0);
  display: block;
  cursor: pointer;
  &::before{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 100px;
    background-color: #eee;
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.45, 1 0.4, 1);
    transition: -webkit-transform 0.3s cubic-bezier(0.45, 1, 0.4, 1);
    transition: transform 0.3s cubic-bezier(0.45, 1, 0.4, 1);
    transition: transform 0.3s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.3s cubic-bezier(0.45, 1, 0.4, 1);
  }
  &::after{
    content: ' ';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 22px;
    height: 22px;
    border-radius: 100px;
    background-color: $T2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0.25, 1.35);
    transition: -webkit-transform .3s cubic-bezier(0.4, 0.4, 0.25, 1.35);
    transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.25, 1.35);
    transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0.25, 1.35);
  }
  &:checked {
    background-color: $T7;
    &::before{
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    &:after {
      -webkit-transform: translateX(31px);
      transform: translateX(31px);
    }
  }
}

.mkreact-switch-button {
  position: relative;
  width: 54px;
  height: 24px;
  line-height: 24px;
  display: inline-block;
  padding: 0 5px 0 5px;
  border-radius: 100px;
  color: $white-color;
  border: 1px solid #eee;
}
.mkreact-switch-on {
  background-color: $B8;
  text-align: left;
}
.mkreact-switch-off {
  background-color: $T6;
  text-align: right;
}
.mkreact-switch-ball {
  display: inline-block;
  width: 22px;
  height: 22px;
  color: $white-color;
  border-radius: 10px;
  background-color: $white-color;
  position: absolute;
  top: 1px;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    border-radius: 100px;
    background-color: $white-color;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
  }
}
.mkreact-switch-ball-on {
  right: 0;
}
.mkreact-switch-ball-off {
  left: 0px;
}

.mkreact-switch-on_ani {
  animation: moveon 0.3s forwards;
}
.mkreact-switch-off_ani {
  animation: moveoff 0.3s forwards;
}

@keyframes moveon {
  from { left: 0 }
  to { left: 30px }
}
@keyframes moveoff {
  from { left: 30px; }
  to { left: 0; }
}